<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="report-con">
    <button style="margin-top: 20px;margin-bottom: 20px" onclick="getNewReport()">强制更新</button>
    <div class="table">
        <table>
            <tr>
                <th>探查结果编码</th>
                <th>最⼤逾期⾦额</th>
                <th>最⻓逾期天数</th>
                <th>最近逾期时间</th>
            </tr>
            <tr>
                <td id="result_code"></td>
                <td id="max_overdue_amt"></td>
                <td id="max_overdue_days"></td>
                <td id="latest_overdue_time"></td>
            </tr>
            <tr>
                <th>最⼤履约⾦额</th>
                <th>最近履约时间</th>
                <th>履约笔数</th>
            </tr>
            <tr>
                <td id="max_performance_amt"></td>
                <td id="latest_performance_time"></td>
                <td id="count_performance"></td>
            </tr>
            <tr>
                <th>当前逾期机构数</th>
                <th>当前履约机构数</th>
                <th>异常还款机构数</th>
                <th>睡眠机构数</th>
            </tr>
            <tr>
                <td id="currently_overdue"></td>
                <td id="currently_performance"></td>
                <td id="acc_exc"></td>
                <td id="acc_sleep"></td>
            </tr>
        </table>
    </div>

</div>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">
    let url = requestUrl + "/erupt-api/userReport/get";
    let urlSearchParams = new URLSearchParams(window.location.search);
    let tokenJson = localStorage.getItem('_token');
    let jsonObj = JSON.parse(tokenJson);

    let isGetNew = 0
    getReport()
    function getReport() {
        $.ajax({
            type: "POST",
            url: url,
            headers: {
                token: jsonObj.token
            },
            data: {userId: urlSearchParams.get('userId'),getNew: isGetNew, type: 1},
            datatype: "json",
            success: function (result) {
                if (result.code === 1) {
                    dataInputHtml(result.data.infoJson);
                } else {
                    alert(result.msg)
                }
                isGetNew = 0
            }
        });
    }

    function getNewReport() {
        isGetNew = 1
        getReport()
    }

    //数据填入
    function dataInputHtml(res) {
        if (res === undefined) {
            return
        }
        let resData = JSON.parse(res)
        console.log(resData)
        //所有遍历
        for (let key in resData) {
            inputById(resData[key], key)
        }

        let result_code = {
            '1': '逾期未还款',
            '2': '正常履约',
            '3': '逾期又还款',
            '4': '无法确认',
            '99': '无数据'
        }
        inputById(result_code[resData['result_code']], 'result_code')

    }

    dataInputHtml()


    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data
        }
    }
</script>
</body>
<style type="text/css">
    i {
        font-style: normal;
    }

    .report-con {
        background: #fff;
        color: #000;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .big-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .desc {
        font-size: 12px;
    }

    .title {
        font-size: 20px;
        margin: 28px 0 20px;
    }

    .small-title {
        font-size: 16px;
        margin: 28px 0 20px;
        padding-left: 10px;
        position: relative;
    }

    .small-title::before {
        content: '';
        background: #1972F8;
        width: 2px;
        height: 16px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .user-info {
        margin: 30px 0 20px;
    }

    .user-info .top {
        display: flex;
        align-items: center;
    }

    .user-info .top .name {
        font-size: 16px;
        line-height: 34px;
    }

    .user-info .top .tip {
        border: 1px solid #0938F7;
        height: 28px;
        line-height: 26px;
        padding: 0 10px;
        border-radius: 17px;
        color: #0938F7;
        font-size: 12px;
        margin-left: 10px;
    }

    .user-info .row {
        display: flex;
        align-items: center;
    }

    .user-info .row .item {
        width: 300px;
        font-size: 12px;
        line-height: 30px;
        margin-top: 6px;
    }

    .user-info .row .item span {
        font-weight: bold;
    }

    .advice-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .advice-title span {
        color: red;
        font-weight: bold;
    }

    .advice-title.level1 span {
        color: #42E61A;
    }

    .advice-title.level2 span {
        color: #22DDDD;
    }

    .advice-title.level3 span {
        color: #338FCC;
    }

    .advice-title.level4 span {
        color: #E6941A;
    }

    .advice-title.level5 span {
        color: #E61A42;
    }

    .advice-list {
        display: flex;
        margin-bottom: 30px;
    }

    .advice-list .item {
        flex: 1;
        color: #fff;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        position: relative;
    }

    .advice-list .item span {
        position: absolute;
        left: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item i {
        position: absolute;
        right: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item.level1 {
        background: #42E61A;
    }

    .advice-list .item.level2 {
        background: #22DDDD;
    }

    .advice-list .item.level3 {
        background: #338FCC;
    }

    .advice-list .item.level4 {
        background: #E6941A;
    }

    .advice-list .item.level5 {
        background: #E61A42;
    }

    .table {
        margin-bottom: 20px;
    }

    .table table {
        width: 100%;
        table-layout: fixed;
        font-size: 12px;
        line-height: 36px;
        border-left: 1px solid #D9DAE2;
        border-top: 1px solid #D9DAE2;
        border-collapse: collapse;
    }

    .table table tr th {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        background: #ECEDF0;
    }

    .table table tr td {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        text-align: center;
        padding: 0;
    }
</style>
</html>
